「嗨！Leo！好久不見！」跟我打招呼的是 Wayne。Wayne 是我在進修時，同期的同學、專題小組成員，也是我的好朋友。
「嗨！Wayne！好久不見！最近好嗎？」我笑著拍了一下他的肩膀說道。
「還過得去啦！你呢？新工作還好嗎？」Wayne 跟店員點了杯咖啡後，開始關心起我的近況來。
「也還 OK 囉！現在又跑回去寫前端了。」跟 Wayne 找了靠窗的座位坐下後，我說。
「前端？！你是說之前學的那個嗎？」Wayne 驚呼了一聲，似乎有點訝異我會跑回去寫前端。
「對，只不過現在前端的世界變化很大，光會 HTML、CSS、JavaScript 跟 jQuery 已經不夠了。」我嘴角掛著一抹高深莫測般地微笑輕輕說道。
「真的假的？！願聞其詳！！」Wayne 被我這麼一說，整個好奇心都被我勾了起來，饒有興致地說道。
「以前的前端......」
大家都知道前端有最基本的三個元素：HTML、CSS、JavaScript。
還有時代的眼淚－Flash
後來，出現了當時最夯最潮大家最愛用的函式庫－jQuery。
那時候的我們，大概是這樣寫前端的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<title>JS Bin</title>
<script>
$(function(){
$("#name").on('keyup', function(e) {
$("h1").text("Hello " + e.target.value);
});
});
</script>
</head>
<body>
<p>請輸入您的名字：</p>
<p><input id="name" type="text"></p>
<h1></h1>
</body>
</html>
那年代的 jQuery，真的是無人不知、無人不曉，轟動武林、驚動萬教....（以下省略五萬字），它讓前端從 Flash 時代，迎來了大前端時代！
又後來呢，有個東西叫做 AngularJS 的玩意兒，悄悄兒冒了出來。它寫出來大概是這樣子的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<title>JS Bin</title>
</head>
<body ng-app>
<p>請輸入您的名字：</p>
<p><input id="name" ng-model="name" type="text"></p>
<h1>{{ "Hello " + name }}</h1>
</body>
</html>
眼尖的朋友或許會發現一件事：咦？！怎麼沒有任何的 JavaScript 程式碼，也沒有做任何的 DOM 操作，卻有一樣的效果？！
沒錯，這正是 Angular 的核心所在－數據驅動。
DOM，全名是文件物件模型 （Document Object Model） 。根據 MDN 的說明，它提供了一個結構化的表示法，並讓程式可以存取與改變文件架構、風格和內容的方法。
舉例來說，我們可以透過使用 JavaScript/jQuery ，操作如上圖所示的 DOM，就可以拿到我們想要拿的文字如 My link。所以一般我們如果想要將 My link 改為 My favorite 的話，就要用上述的操作來取得並更新其文字。
但 Anguar 的理念是想要透過數據綁定來消除傳統的 DOM 操作，進而減少複雜的操作以及避免錯誤的產生。
當然 Angular 想做的事情也不僅僅只是數據綁定而已。其他的像是：MVC 的設計模式、依賴注入 （DI，Dependency Injection） 、完整的測試環境等等，都是 Angular 跟以往過去所有的函式庫不同的地方，Angular 想提供的其實是一個完整的開發平台，並藉此改變前端世界與開發文化。
或許有時候你會聽到別人說 AngularJS，抑或許有時候你會聽到別人說 Angular，究竟這其中到底差別在哪裡呢？
一開始，的確是叫做 AngularJS 沒錯！直到後來大版號升上 2 之後，才正式將其正名為 Angular ，以便可以跟 1.x 版的 AngularJS 區分開來。而且 1.x 版的 AngularJS 其實還算是函式庫，直到 2.x 版的 Angular 出現之後，才開始能稱作是一個開發平台。怎麼說呢？其實 Angular 有提供非常多功能給開發者使用，如：
因從 Angular 9 之後在
ng serve時，ivy預設開啟的關係，基本上 Augury 已經不適用，最近 Angular 官方有出了新的且更好用的 extension - Angular DevTools ，推薦大家使用這個唷
...等等。
功能太多我就不贅述了，想知道更詳細的朋友可以閱讀保哥的文章。
值得一提的是，Angular 是搭配 TypeScript 來開發。TypeScript 是微軟開發的程式語言，是 JavaScript 的嚴格超集（有沒有很聽不懂？！）。簡單來說，它是為了讓 JavaScript 更能夠撰寫出大型應用程式的商業邏輯所設計出來的，令其擺脫難以撰寫較複雜邏輯的窘境與大多數時候只能操作 DOM 的宿命。
TypeScript 其實早在 2012 年就已經上市了，但始終叫好不叫座。直到 Angular 的出現，才讓 TypeScript 開始爆炸性般地成長。關於 TypeScript，如果想知道更多可以參考 TypeScript 特色與歷史簡介 此篇文章，裡面詳細的描述了：什麼是 TypeScript？TypeScript 的歷史、為什麼選擇 TypeScript 等等。我覺得寫得非常完整且精采。
感謝邦友
itsems的提醒，TypeScript 特色與歷史簡介此篇文章已被原作者移除，故連結失效。有興趣的人可以看看筆者推薦的另一篇文章：为什么选择 TypeScript。
或許有人會覺得，前端其他的開發框架也很厲害阿！！究竟是為什麼會選擇看起來就很複雜的 Angular 呢？
我們先來看一張有趣的圖片：
沒錯！Angular 一開始的學習曲線雖然與其他框架相比高了些，畢竟它比較囉嗦，開發方式也跟傳統的開發方式大相逕庭。對於一般習慣傳統開發方式或是剛踏入前端甚至是程式領域的人來說，是滿辛苦、難以理解的。但渡過一開始的陣痛期與適應了之後，其實是會忽然有一種豁然開朗的感覺！
而且正如我前面所講到，Angular 跟其他的開發框架不一樣的是，它比較像是一個完整的平台，從開發到測試它都一手包辦，並且擁有豐富的生態系，背後又有 Google 在推動，甚至就許多公司的立場而言，Angular 有完整、完善的規範與一致的開方式，這才是一個框架、一個平台真正的價值。
Hi LEO 大大：
「TypeScript 特色與歷史簡介」
這篇連結已經失效了><
Hi itsems,
非常感謝你的提醒，已新增備註與替代文章連結。 ：）
雖然這篇是 angular，但是有提到 jquery，我想還是說一下~
<script>
$(function(){
$("#name").on('keyup', function(e) {
$("h1").text("Hello " + e.target.value);
});
});
</script>
Script Tag 的相關程式最好放在 Body 頁籤下方，避免有的新手看到以為 Javascript 就是這樣寫 (跑錯棚~)
Hi amshuo, 感謝你的補充。
如果連要放哪裡都不太清楚的新手朋友，可能就不太適合看此系列文了XD
iThome鐵人賽
看影片追技術